<div id="async-test-dialog" style="display:none;overflow:hidden">
 <#list tokens as tk>
 <span style='display: none;' class='token' clientCode='${tk.key}' callname='${tk.name}' skCode='${tk.id}'></span>
 </#list>
	<style>
		#async-test-dialog .async-test-title-line {
			height: 28px;
			line-height: 28px;
			font-size: 14px;
			color: #333333;
		}

		#async-test-dialog .async-test-content {
			padding-top: 0;
			padding-left: 30px;
		}

		#async-test-dialog .async-test-content-label {
			width: 50px;
			color: #666666 !important;
		}
		#async-test-dialog .async-test-table {
			border-collapse: separate;
			table-layout: fixed;
			/*word-break: break-all;*/
			border-spacing: 0 11px;

		}
		/*********选择证书************/
		#async-test-dialog .select-secret {

		}


		.tempo-steps--horizontal {
			white-space: nowrap;
		}

		.tempo-steps {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
		}

		.tempo-step.is-horizontal {
			display: inline-block;
		}
		.tempo-step {
			position: relative;
			-ms-flex-negative: 1;
			flex-shrink: 1;
		}
		.tempo-step.is-center .tempo-step__head, .tempo-step.is-center .tempo-step__main {
			text-align: center;
		}

		.tempo-step__head.is-finish {
			color: #409eff;
			border-color: #409eff;
		}
		.tempo-step__head {
			position: relative;
			width: 100%;
		}
		.tempo-step.is-center .tempo-step__line {
			left: 50% !important;
			right: -50% !important;
		}
		.tempo-step.is-horizontal .tempo-step__line {
			height: 2px;
			top: 11px;
			left: 0;
			right: 0;
		}
		.tempo-step:last-of-type .tempo-step__line {
			display: none;
		}

		.tempo-step__line {
			position: absolute;
			border-color: inherit;
			background-color: #c0c4cc;
		}
		.tempo-step__icon.is-text {
			border-radius: 50%;
			border: 2px solid;
			border-color: inherit;
		}
		.tempo-step__line-inner {
			display: block;
			border-width: 1px;
			border-style: solid;
			border-color: inherit;
			-webkit-transition: .15s ease-out;
			transition: .15s ease-out;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			width: 0;
			height: 0;
		}
		.tempo-step__icon {
			position: relative;
			z-index: 1;
			display: -webkit-inline-box;
			display: -ms-inline-flexbox;
			display: inline-flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 24px;
			height: 24px;
			font-size: 14px;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			background: #fff;
			-webkit-transition: .15s ease-out;
			transition: .15s ease-out;
		}
		.tempo-step.is-center .tempo-step__head, .tempo-step.is-center .tempo-step__main {
			text-align: center;
		}
		.tempo-step__main {
			white-space: normal;
			text-align: left;
		}
		.tempo-step__title.is-finish {
			color: #409eff;
		}
		.tempo-step__title {
			font-size: 14px;
			line-height: 38px;
		}
		.tempo-step__head.is-wait {
			color: #c0c4cc;
			border-color: #c0c4cc;
		}
		.tempo-step__title.is-wait {
			color: #c0c4cc;
		}

		#async-test-dialog .execute-btn:hover {
			border: 1px solid #337BFF;
		}
		#async-test-dialog .execute-btn {
			border: 1px solid #337BFF;
			background-color: #337BFF;
			color:white !important;
			float: right;
			height: 28px;
			line-height: 26px;
		}
		.async-test-dialog-cancle-btn:hover {
			border: 1px solid #337BFF !important;
			color: #337BFF !important;
		}

		#async-test-dialog .stop-btn {
			float: right;
			height: 28px;
			line-height: 26px;
		}
		#async-test-dialog .stop-btn:hover {
			border: 1px solid #337BFF;
			color: #337BFF !important;
		}

		.tempo-tag {
			background-color: rgba(64,158,255,.1);
			display: inline-block;
			padding: 0 10px;
			height: 22px;
			line-height: 22px;
			font-size: 12px;
			color: #409eff;
			border-radius: 2px;
			box-sizing: border-box;
			border: 1px solid rgba(64,158,255,.2);
			border-top-color: rgba(64, 158, 255, 0.2);
			border-right-color: rgba(64, 158, 255, 0.2);
			border-bottom-color: rgba(64, 158, 255, 0.2);
			border-left-color: rgba(64, 158, 255, 0.2);
			white-space: nowrap;
		}
		.tempo-tag--success {
			background-color: rgba(103,194,58,.1);
			border-color: rgba(103,194,58,.2);
			color: #67c23a;
		}

		.async-test-dialog-title {
			font-size: 14px !important;
			color: #666666 !important;
			float: none !important;
		}

		#async-test-dialog td {
			height: 28px;
			line-height: 28px;
			padding: 0 8px;
		}

		#async-test-dialog .ui-widget input {
			color: #666666 !important;
		}
		#async-test-dialog .ui-widget select {
			color: #666666 !important;
		}
		#async-test-dialog .ui-widget textarea {
			color: #666666 !important;
		}
		#async-test-dialog .ui-widget button {
			color: #666666 !important;
		}


		#async-test-dialog .flow-params td{
			text-overflow: ellipsis;
			overflow: hidden ;
			white-space: nowrap ;
		}
        #async-test-dialog .flowparam-div-center {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: center;
            -ms-flex-pack: center;
        }
	</style>
	<form id="tempo-mine-flow-service-test"  onsubmit="return false;">
		<input type="hidden" ui-role="validatebox" name="async-test-data-url"/>
		<!--选择证书-->
		<div class="select-secret" id="select-secret">
			<div class="async-test-title-line">
				<!--选择证书title-->
				<span><@spring.message "mine.dyxtxz"/></span>
			</div>
			<table class="formLayout async-test-content async-test-table">
				<tbody>
				<tr>
					<td class="async-test-content-label">
						<label for="clientCode"><@spring.message "mine.kehubiaoshi"/></label>
					</td>
					<td style="width: 270px">
						<input type="text" value="${token.key}"
							   name='async-test-data-clientcode' style="display:none" readonly></input>
						<select id="selectCode" > </select>
					</td>
					<td  class="async-test-content-label" style="padding-left: 40px">
						<label ><@spring.message "mine.clientName"/></label>
					</td>
					<td>
						<span name="async-test-data-callname" style="color: #666666;display: block;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; width: 184px; height: 28px" title="${token.name}">${token.name}</span>
					</td>
				</tr>
				<tr style="display: none;">
					<td class="">
						<label for="skCode"><@spring.message "mine.shouquanma"/></label>
					</td>
					<td>
						<input ui-role="validatebox" style="width:250px" ui-options="width:250, readonly:true"
							   name='async-test-data-skcode' value="${token.id}" readonly></input>
					</td>
				</tr>
				</tbody>
			</table>
		</div>
		<!--流程参数-->
		<div class="flow-params" id="flow-params" style="padding-top: 4px">
			<div class="async-test-title-line">
				<span><@spring.message "mine.liuchengcanshu"/></span>
			</div>
			<div style="max-height: 131px; overflow-x: hidden; overflow-y: auto">
                <#if serviceParams?? &&(serviceParams?size>0)>
                <table class="formLayout async-test-content async-test-table" id="ptable">
                    <tbody>
                        <tr style="display: none"></tr>
                        <#list serviceParams as param>
                        <tr>
                            <td class="async-test-content-label">
                                <label>参数名称</label>
                            </td>
                            <td >
                                <span name="pname" style="color: #666666" title="${param.paramName}">${param.paramName}</span>
                            </td>
                            <td  class="async-test-content-label">
                                <label >参数值</label>
                            </td>
                            <td>
                                <span>${param.paramValue}</span>
                            </td>
                            <td  class="async-test-content-label" style="padding-left: 60px; display: none">
                                <label >参数类型</label>
                            </td>
                            <td style="display: none">
                                <span>${param.paramType}</span>
                            </td>
                            <td  class="async-test-content-label" style="padding-left: 60px; display: none">
                                <label >节点类型</label>
                            </td>
                            <td style="display: none">
                                <span>${param.nodeType}</span>
                            </td>
                        </tr>
                    </#list>
                    </tbody>
                </table>
                <#else>
                </#if>
			</div>

		</div>
		<!--API调用-->
		<div class="api-execute" id="api-execute" style="padding-top: 15px">
			<div class="async-test-title-line">
				<span><@spring.message "mine.apidiaoyong"/></span>
			</div>
			<input name="eid" type="hidden" ui-role="validatebox" ui-options="width: 200, disabled: true" ></input>
			<table class="formLayout async-test-content async-test-table">
				<tbody>
					<tr>
						<td class="async-test-content-label">
							<label>服务ID</label>
						</td>
						<td style="width: 250px"  style="padding-left: 60px">
							<span name="serviceId"></span>
						</td>
						<td style="padding-right: 12px !important;">
							<button class="execute-btn exebtn tempo-datagrid-toolbar-btn tempo-button ui-button ui-corner-all ui-widget"><@spring.message "mine.runtask"/></button>
						</td>
					</tr>
					<!--执行状态-->
					<tr>
						<td class="async-test-content-label">
							<label>服务状态</label>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<div id="flow-steps" style="width: 500px; margin: auto">
								<div class="tempo-steps tempo-steps--horizontal" style="width: 100%">
									<div class="tempo-step is-horizontal is-center" currentIndex="1" style="-ms-flex-preferred-size: 50%; flex-basis: 50%; margin-right: 0px;">
										<div class="tempo-step__head is-wait">
											<div class="tempo-step__line" style="margin-right: 0px;">
												<i class="tempo-step__line-inner" style="transition-delay: 0ms; border-width: 0px; width: 0%;"></i>
											</div><div class="tempo-step__icon is-text">
												<div class="tempo-step__icon-inner">1</div>
											</div>
										</div>
										<div class="tempo-step__main">
											<div class="tempo-step__title is-wait">提交完毕等待执行</div>
										</div>
									</div>
									<div class="tempo-step is-horizontal is-center" currentIndex="2" style="-ms-flex-preferred-size: 50%;flex-basis: 50%; margin-right: 0px;">
										<div class="tempo-step__head is-wait">
											<div class="tempo-step__line" style="margin-right: 0px;">
												<i class="tempo-step__line-inner" style="transition-delay: 150ms; border-width: 0px; width: 0%;"></i>
											</div>
											<div class="tempo-step__icon is-text">
												<div class="tempo-step__icon-inner">2</div>
											</div>
										</div>
										<div class="tempo-step__main">
											<div class="tempo-step__title is-wait">正在执行</div>
											<div class="tempo-step__description is-wait"></div>
										</div>
									</div>
									<div class="tempo-step is-horizontal is-center" currentIndex="3" style="-ms-flex-preferred-size: 50%;flex-basis: 50%; margin-right: 0px;">
										<div class="tempo-step__head is-wait">
											<div class="tempo-step__line" style="margin-right: 0px;">
												<i class="tempo-step__line-inner" style="transition-delay: 300ms; border-width: 0px; width: 0%;"></i>
											</div>
											<div class="tempo-step__icon is-text">
												<div class="tempo-step__icon-inner">3</div>
											</div>
										</div>
										<div class="tempo-step__main">
											<div class="tempo-step__title is-wait">执行完毕</div>
											<div class="tempo-step__description is-wait"></div>
										</div>
									</div>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</form>
 </div>